<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            li {
                list-style: none;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <ul>
                <!-- {{}}: 插值表达式 -->
                <li v-for="(item,index) in newsList" :key="index">
                    {{item.title}} - {{item.timer}}
                </li>
            </ul>
            <!-- <button v-on:click="addMoney">升职加薪</button> -->
            <button @click="addMoney">升职加薪</button>
        </div>
        <button onclick="clickBtn()">按钮</button>
        <!-- <button>按钮</button> -->
        <script src="../vue.js"></script>
        <script>
            function clickBtn() {
                console.log(123);
            }
            let btn = document.getElementsByTagName('button')[0];

            btn.onclick = function () {
                console.log(333);
            };

            // btn.onclick = function () {
            //     console.log(222);
            // };

            let ary = [1, 2, 3, 4];
            for (const key in ary) {
                console.log(key); // 0 1 2 3;
                console.log(ary[key]);
            }
            let obj = {
                name: 'wangjin',
                age: 22,
            };
            for (const key in obj) {
                console.log(key); // name age
                // console.log(obj.key); // undefined
                console.log(obj[key]);
            }
            console.log(obj['name']);
            console.log(obj.name);
            let a = 'name';
            console.log(obj[a]);

            new Vue({
                el: '#app', // element
                data: {
                    newsList: [
                        { title: '新闻列表1', timer: '2021-05-20' },
                        { title: '新闻列表2', timer: '2021-05-20' },
                    ],
                },
                methods: {
                    // addMoney: function () {}
                    //ES6写法
                    addMoney() {
                        console.log('我升职加薪啦~~~');
                    },
                },
            });
        </script>
    </body>
</html>
